<script>
import { reactive, toRefs } from "vue";
import FlowhS10to14 from "@/components/Charts/LineCharts/inoutFlow/S/FlowhS10to14.vue";
import FlowhS14to18 from "@/components/Charts/LineCharts/inoutFlow/S/FlowhS14to18.vue";
import FlowhS18to22 from "@/components/Charts/LineCharts/inoutFlow/S/FlowhS18to22.vue";
import GenBagS from "@/components/Charts/LineCharts/inoutFlow/S/GenBagS.vue";
export default {
  components: {FlowhS10to14,FlowhS14to18,FlowhS18to22,GenBagS,
  },
  setup() {
    const state = reactive({
      labelListS10to14: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      labelListS14to18: ["14:00", "15:00", "16:00", "17:00", "18:00"],
      labelListS18to22: ["18:00", "19:00", "20:00", "21:00", "22:00"],
      dataListFlowS10to14: [
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      ],
      dataListFlowS14to18:[
      160, 208, 125, 109, 170, 159, 209, 109, 201, 175,      
      ],
      dataListFlowS18to22:[
      100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      ],
      dataListGBS:[100, 209, 109, 201],
    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:50%">
   <FlowhS10to14 :labelListS10to14="labelListS10to14" :dataListFlowS10to14="dataListFlowS10to14" />
   <FlowhS14to18 :labelListS14to18="labelListS14to18" :dataListFlowS14to18="dataListFlowS14to18" />
   <FlowhS18to22 :labelListS18to22="labelListS18to22" :dataListFlowS18to22="dataListFlowS18to22" />
 </div>
 <div style="display: flex; height:50%">
  <GenBagS :dataListGBS="dataListGBS" />
 </div>
</template>
<style scoped>
</style>






















